<script>
import ShowFile from "../RightsManagement/BaseFileMange/ShowFile";
export default {
  name: "ShowFile",
  components: {
    ShowFile,
  },
  data() {
    return {
      // 是否展示弹窗
      showFileDialog: false,
      /**由于只渲染同一个弹窗用来预览文件
       * 点击预览按钮的时候，需要知道
       * 1.字段->curProp
       * 2.文件类型->fileType
       * 3.文件路径->fileUrl
       *  */
      curProp: "",
      fileType: "",
      fileUrl: "",
    };
  },
  props: {
    columns: {
      type: Array,
    },
    row: {
      type: Object,
    },
    num: {
      type: String | Number,
      default: 2,
    },
  },
  render(h) {
    const col_span = (24 / this.num) | 0; // 每一行col的大小
    const row_for = []; //几个row，用于row标签的for循环
    let i = 0;
    let row_item = [];
    while (i <= this.columns.length) {
      row_item = this.columns.slice(i, Number(this.num) + i);
      if (row_item.length !== 0 && row_item.length === 3) {
        row_for.push(row_item);
      }
      i += Number(this.num);
    }
    // 处理插槽
    if (this.$slots) {
      for (const slot in this.$slots) {
        if (row_item.length === 3) {
          row_for.push(row_item);
          row_item = [];
        }
        row_item.push(this.$slots[slot]);
      }
    }
    row_for.push(row_item);

    // console.log("row_for: ", row_for);
    return (
      <div>
        {row_for.map((curRow, index) => (
          <el-row key={index}>
            {curRow.map((item) => (
              <el-col span={col_span} key={item.prop}>
                {Object.prototype.toString.call(item) === "[object Array]" ? (
                  item
                ) : (
                  <el-form-item key={item.prop} label={item.name + " :"}>
                    {(() => {
                      if (item.upload) {
                        return (
                          <el-button
                            // slot="reference"
                            icon={`el-icon-${
                              item.upload.accept === "image"
                                ? "picture"
                                : "video-camera-solid"
                            }`}
                            onClick={() => {
                              // 显示弹窗(更新三个字段的值)
                              this.fileType = item.upload.accept;
                              this.curProp = item.prop;
                              this.fileUrl = this.row[item.prop];
                              this.showFileDialog = true;
                            }}
                          ></el-button>
                        );
                      } 
                      else if (item.format) {
                        if(item.select){
                          return <span>{item.format(this.row[item.prop],item.select.options)}</span>
                        }else{
                          return <span>{item.format(this.row[item.prop])}</span>
                        }
                      } 
                      else {
                        return <span>{this.row[item.prop]}</span>;
                      }
                    })()}
                  </el-form-item>
                )}
              </el-col>
            ))}
          </el-row>
        ))}
        {this.createUniqueShowFile()}
      </div>
    );
  },
  methods: {
    // 创建唯一的ShowFile组件
    createUniqueShowFile() {
      return (
        <ShowFile
          dialogVisible={this.showFileDialog}
          close={() => (this.showFileDialog = false)}
          fileUrl={this.fileUrl}
          fileType={this.fileType}
        ></ShowFile>
      );
    },
  },
};
</script>